<template>
  <KView class="shop-mall-search-input" @click="inputClick">
    <KView class="shop-mall-search-input-placeholder">
      {{placeholder}}
    </KView>
    <KView class="shop-mall-search-input-icon">
      <img class="sys-img" :src="searchIcon" mode="aspectFit">
    </KView>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    props: {
      placeholder: {
        type: String,
        default: ''
      }
    },

    data() {
      return {
        searchIcon: GlobalData.images.searchIcon
      };
    },

    methods:{
      inputClick(){
        this.$emit('click');
      }
    }
  };

</script>

<style lang="scss">
  .shop-mall-search-input {
    height: formatPx(64);
    background: #F5F6F9;
    padding-right: formatPx(22);
    padding-left: formatPx(60);
    border-radius: formatPx(32);
    position: relative;

    .shop-mall-search-input-placeholder {
      font-size: formatPx(28);
      color: #b3b9c2;
      line-height: formatPx(64);
      vertical-align: top;
    }

    .shop-mall-search-input-icon {
      position: absolute;
      left: formatPx(22);
      top: 0;
      height: 100%;
      width: formatPx(26);
    }
  }

</style>
